<template>
  <div class="info-item card-item">
    <div class="title-info">
      <svg-icon name="home-basic"/>
      <span class="sub-title">基础信息</span>
    </div>

    <div class="info travel-basic-info">
      <div class="basic-item">
        <span class="basic-title">景点地区</span>
        <div class="basic-content">
          <el-tag size="large">
            <i class="fa-solid fa-location-dot"></i>
            {{ travelStore.currentTravelSpot.area.join('-') }}
          </el-tag>
        </div>
      </div>

      <div class="basic-item">
        <span class="basic-title">景点地址</span>
        <div class="basic-content">
          <el-tag v-if="travelStore.currentTravelSpot.address"
                  size="large">
            <i class="fa-solid fa-map-location-dot"></i>
            {{ travelStore.currentTravelSpot.address }}
          </el-tag>
          <el-tag v-else>无</el-tag>
        </div>
      </div>

      <div class="basic-item">
        <span class="basic-title">景点价格</span>
        <div class="basic-content">
          <el-tag size="large">
            <i class="fa-solid fa-ticket"></i>
            {{ formatAmount(travelStore.currentTravelSpot.price) }} 元
          </el-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { SvgIcon } from 'vue3-common'
import { useTravelStore } from '@/store/travel.ts'
import { formatAmount } from 'vue3-common/utils/numberUtil'

const travelStore = useTravelStore()
</script>
